<template>
<h1>猜数字游戏</h1>
  <input type="text" :value="num">
  <button @click="">猜一猜</button>
  <h3>{{guess}}</h3>
</template>

<script setup>
//生成一个随机数
import {ref} from "vue";

let x=parseInt(Math.random()*100)+1;
console.log(x);
//定义变量用来保存用户输入的数字
const num=ref('');
//定义变量用来保存显示的结果
const result=ref('');
//定义猜数字的方法
const guess=()=>{
  //如果未输入数字或输入的是非数字
  if (num.value.trim()==''||isNaN(num.value)){
    num.value='';//清空输入框
    alert('请输入数字');//弹出警告框
    return;//结束函数
  }
  if (num.value>x){
    result.value='猜大了'
  }else if (num.value<x){
    result.value= '猜小了'
  }else {
    result.value= '猜对了'
  }
}
</script >

<style scoped>

</style>